<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <hr />
      <zi-com :father-data="fdata" :mdata="8888" :prop-c="'你好'"></zi-com>
    </div>
    <template id="zi">
      <div>
        <h1>{{zdata.name}}----{{zdata.age}}</h1>
        <ul>
          <li v-for="(item,index) in fatherData" :key="index">
            {{item}}
          </li>
        </ul>
        <h1>{{mdata}}</h1>
        <h1>{{propD}}</h1>
      </div>
    </template>
    <script src="vue.js"></script>
    <script>
      // 父组件像子组件传参 用props传递
      //子组件定义的props  父组件在调用子组件时候用v-bind像props传参

      //vue的单向数据流
      //  所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，
      //但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

      // 额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。
      //这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。
      var vm = new Vue({
        el: '#app',
        data() {
          return {
            fdata: [8, 9, 10]
          }
        },
        components: {
          ziCom: {
            template: '#zi',
            // props: ['fatherData', 'mdata'],

            props: {
              fatherData: Array,
              mdata: Number,
              propA: Number,
              // 多个可能的类型
              propB: [String, Number],
              // 必填的字符串
              propC: {
                type: String,
                required: true
              },
              propD: {
                type: Number,
                default: 100
              }
            },
            mounted() {},
            data() {
              return {
                zdata: {
                  name: '小李',
                  age: 2
                }
              }
            }
          }
        }
      })
    </script>
  </body>
</html>
